<template>
  <div class="wrap">
    <div class="labelBox">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <div>
          <el-form-item label="昵称/姓名">
            <el-input
              v-model="params.nickname"
              placeholder="昵称/姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="params.mobile"
              placeholder="手机号"
              clearable
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态">
            <el-select v-model="params.sta" placeholder="请选择">
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="注册日期">
            <el-date-picker
              v-model="time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="checkTime"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ClientaccountGetPageList(1)"
              >查询</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="labelBox mt-10">
      <el-row class="line36">
        <el-col :span="4" class="">
          总用户数 <span class="color-red font-26">{{ total }}</span>
        </el-col>
        <!-- <el-col :span="4" class="">
          条件满足数 <span class="color-red font-26">112222</span>
        </el-col> -->
      </el-row>
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>

        <el-table-column prop="mobile" label="手机号"> </el-table-column>
        <el-table-column label="昵称/姓名">
          <template slot-scope="scope">
            {{ scope.row.truename ? scope.row.truename : scope.row.nickname }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="registerPlatform" label="注册渠道" /> -->
        <!-- <el-table-column prop="store_certificates" label="地区" /> 空 -->
        <el-table-column prop="shareCode" label="邀请码" />
        <el-table-column prop="guideName" label="推荐人" />
        <el-table-column prop="studentCount" label="下级" />
        <!-- <el-table-column prop="parentName" label="会员归属" /> -->
        <el-table-column prop="account_balance" label="账号余额" />
        <el-table-column label="订单信息">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="color-666"
              @click="goNextDetail(scope.row.mobile)"
              >点击详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="车辆信息">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="color-666"
              @click="openDetail(scope.row, 'car')"
              >点击详情</el-button
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="companyname" label="积分" 空/> -->
        <el-table-column prop="bussinesstime" label="隐私信息">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="color-666"
              @click="openDetail(scope.row, 'back')"
              >点击详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="isgover" label="状态">
          <template slot-scope="scope">
            {{ scope.row.status === 0 ? "正常" : "删除" }}
          </template>
        </el-table-column>
        <el-table-column label="注册时间">
          <template slot-scope="scope">
            {{ scope.row.addtime | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="last_Login_Time" label="最后登录时间">
          <template slot-scope="scope">
            {{ scope.row.last_Login_Time | filterTime }}
          </template>
        </el-table-column>
        <el-table-column prop="login_Platform" label="登录设备">
        </el-table-column>
      </el-table>
      <div class="block mt-20">
        <el-row justify="center" type="flex">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageIndex"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </div>
    <el-dialog
      title="车辆信息"
      :visible.sync="carMsg"
      width="40%"
      :before-close="handleClose"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table border :data="carMsgObj">
        <el-table-column prop="brand_name" label="品牌"> </el-table-column>
        <el-table-column prop="yeartype" label="年款"> </el-table-column>
        <el-table-column prop="car_name" label="系列"> </el-table-column>
        <el-table-column prop="car_type_name" label="车型"> </el-table-column>
        <el-table-column prop="car_num" label="车牌"> </el-table-column>
        <el-table-column prop="" label="类型"
          ><template slot-scope="scope">{{
            scope.row.displacement == "-1" ? "电动" : "燃油"
          }}</template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="用户隐私信息"
      :visible.sync="privacy"
      width="30%"
      :before-close="handleClose"
    >
      <el-row class="pad-t-b-15">
        <el-col :span="6">身份证号：</el-col
        ><el-col :span="18">{{ privacyObj.idcardno }}</el-col>
      </el-row>
      <el-row class="pad-t-b-15">
        <el-col :span="10"
          ><el-image
            style="width: 100px; height: 100px"
            :src="privacyObj.faceimg"
            fit="scale-down"
          ></el-image></el-col
        ><el-col :span="10"
          ><el-image
            style="width: 100px; height: 100px"
            :src="privacyObj.backimg"
            fit="scale-down"
          ></el-image
        ></el-col>
      </el-row>

      <el-table border :data="privacyObj.banknos">
        <el-table-column prop="bank_name" label="银  行"> </el-table-column>
        <el-table-column prop="bank_num" label="银行卡号"> </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userList",
  data() {
    return {
      tableData: [],
      privacy: false,
      privacyObj: {},
      carMsg: false,
      carMsgObj: {},
      storetype: "0",
      total: 0,
      time: "",
      params: {
        pageIndex: 1,
        pageSize: 10,
        mobile: "",
        nickname: "",
        sta: "",
        begintime: "",
        endtime: "",
      },
      statusList: [
        {
          id: 0,
          name: "正常",
        },
        {
          id: 1,
          name: "冻结",
        },
        {
          id: 2,
          name: "注销",
        },
      ],
    };
  },
  mounted() {
    this.ClientaccountGetPageList(1);
  },
  methods: {
    ClientaccountGetPageList(type) {
      if (type === 1) {
        this.params.pageIndex = 1;
      }
      this.$api.user.ClientaccountGetPageList(this.params).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    returnType(id, type) {
      let name = "";
      this[type].forEach((it) => {
        if (it.id == id) {
          name = it.name;
        }
      });
      return name;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleSizeChange(e) {
      this.params.pageSize = e;
      this.ClientaccountGetPageList();
    },
    handleCurrentChange(e) {
      this.params.pageIndex = e;
      this.ClientaccountGetPageList();
    },
    selectStoreType(e) {
      // console.log(e)
      this.storetype = e;
      this.StoreGetPageList();
    },
    checkTime(val) {
      console.log(val);
      if (val) {
        this.params.begintime = val[0];
        this.params.endtime = val[1];
      } else {
        this.params.begintime = "";
        this.params.endtime = "";
      }
    },
    openDetail(obj, type) {
      if (type === "car") {
        if (obj.cars.length > 0) {
          this.carMsgObj = obj.cars;
          this.carMsg = true;
        } else {
          this.$message({
            message: "该条数据没有车辆信息",
            type: "warning",
          });
        }
      } else {
        if (
          obj.idcardno == "" &&
          obj.faceimg == "" &&
          obj.backimg == "" &&
          obj.banknos.length == 0
        ) {
          this.$message({
            message: "该条数据没有隐私信息",
            type: "warning",
          });
        } else {
          this.privacyObj = obj;
          this.privacy = true;
        }
      }
      console.log(obj);
    },
    goNextDetail(phone) {
      this.$router.push({ path: "/order/order", query: { phone: phone } });
    },
  },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  padding: 10px;
  background: #f5f5f5;
}
.labelBox {
  background: #fff;
  padding: 10px;
}
.block {
  text-align: right;
}
</style>
